<template>
  <div>
    <a-modal
      v-model:visible="previewConfig.showResult"
      title="扫码预览"
      okText="确定"
      :maskClosable="false"
    >
      <div class="text-center">
        <img :src="imgSrc" width="120" />
        <div>使用手机扫描预览</div>
        <div></div>
        <div class="flex gc-2 actions align-center justify-center">
          <a-tooltip>
            <template #title>发送图片到手机</template>
            <send-outlined @click="sendImageToPhone" />
          </a-tooltip>
          <a-tooltip>
            <template #title>前往访问</template>
            <a :href="previewConfig.url" target="_blank"><global-outlined /></a>
          </a-tooltip>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { getQrcde } from "@/api/service/utils";
import { onUpdated, ref } from "vue";
import { previewConfig } from "../bus/bin";

const imgSrc = ref("");
onUpdated(() => {
  imgSrc.value = previewConfig.image;
});
const sendImageToPhone = () => {
  var host = import.meta.env.VITE_CLIENT + "download?data=";
  let params = {
    data: host + previewConfig.url
  };
  getQrcde(params).then((res) => {
    imgSrc.value = res.data;
  });
};
</script>

<style lang="scss" scoped>
</style>
